<div class="sixteen wide column">
  <div class="ui centered grid">
    <div class="column">
      <div class="ui segment">
        <div class="center aligned text">
          <div class=" field">
            <div class="d-flex" style="justify-content: center;">
              <UiCheckbox @class="ui slider" @checked={{if this.model.event.isChatEnabled 'active' }}
                @onChange={{action 'toggleChat' }} />
              <label class="weight-300" style="font-size: large">
                {{if this.model.isChatEnabled (t 'Turn off Event Chat') (t 'Turn on Event Chat')}}
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="sixteen wide column">
        {{#if this.model.event.isChatEnabled}}
          <h4 class="centered text">{{t 'Chat is currently enabled for this event. Users can access a chat channel for
            this event.'}}</h4>
          <table class="ui selectable celled table">
            <thead>
              <tr>
                <th class="text center aligned">
                  {{t 'Room'}}
                </th>
                <th class="text center aligned">
                  {{t 'Room Chat'}}
                  <UiPopup
                    @tagName="i"
                    @class="info circle icon"
                    @content={{t-var 'Activating a room chat adds a chat channel that is only available for the specific room.'}} />
                </th>
                <th class="text center aligned">
                  {{t 'Event Chat'}}
                  <UiPopup
                    @tagName="i"
                    @class="info circle icon"
                    @content={{t-var 'Activating the event chat for a room adds a chat channel that can be used across different rooms.'}} />
                </th>
              </tr>
            </thead>
            <tbody>
              {{#each this.rooms as |room|}}
                <tr>
                  <td class="text center aligned"> {{room.name}}</td>
                  <td class="text center aligned">
                    <UiCheckbox @class="ui slider" 
                    @checked={{if room.isChatEnabled 'active' }}
                    @onChange={{action 'changeRoomChatStatus' room }} /></td>
                  <td class="text center aligned">
                    <UiCheckbox @class="ui slider" 
                    @checked={{if room.isGlobalEventRoom 'active' }}
                    @onChange={{action 'setGlobalEventRoom' room }} /></td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        {{else}}
          <h4 class="centered text">{{t 'Chat is currently not enabled for this event. Users cannot access chat for this
            event.'}}</h4>
        {{/if}}
      </div>
    </div>
  </div>
</div>